<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="setting-bar" *ngIf="result.type === datasetType.TABLE && !published">
  <div class="visualization-selector">
    <nz-radio-group [(ngModel)]="config?.graph.mode" (ngModelChange)="switchMode($event)" nzButtonStyle="solid">
      <label *ngFor="let item of visualizations"
             nz-radio-button
             [nz-tooltip]="item.name"
             [nzValue]="item.id">
        <i nz-icon [nzType]="item.icon"></i>
      </label>
    </nz-radio-group>
  </div>

  <nz-button-group class="export-dropdown">
    <button nz-button (click)="exportFile('csv')">
      <i nz-icon nzType="download" nz-tooltip="Download Data as CSV"></i>
    </button>
    <button class="export-dropdown-icon-btn" nz-button nz-dropdown [nzDropdownMenu]="exportMenu" nzPlacement="bottomRight">
      <i nz-icon nzType="down"></i>
    </button>
  </nz-button-group>
  <nz-dropdown-menu  #exportMenu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item (click)="exportFile('csv')">CSV</li>
      <li nz-menu-item (click)="exportFile('tsv')">TSV</li>
    </ul>
  </nz-dropdown-menu>

  <a class="setting-trigger" tabindex="-1" (click)="switchSetting()">
    Setting
    <i
      nz-icon
      nzType="caret-down"
      [nzRotate]="config?.graph.optionOpen ? 180 : 0"
      class="setting-icon"
      nz-dropdown
    ></i>
  </a>
</div>
<div nz-resizable
     nzPreview
     (nzResizeEnd)="onResize($event)"
     [nzGridColumnCount]="12"
     [nzMinColumn]="1">
  <nz-resize-handle nzDirection="bottomRight" *ngIf="!published">
    <zeppelin-resize-handle></zeppelin-resize-handle>
  </nz-resize-handle>
  <ng-template cdkPortalOutlet></ng-template>
  <ng-container [ngSwitch]="result?.type">
    <div *ngSwitchCase="datasetType.HTML"
         class="inner-html"
         zeppelinMathJax
         zeppelinRunScripts
         [scriptsContent]="innerHTML"
         [innerHTML]="innerHTML"></div>
    <div *ngSwitchCase="datasetType.TEXT" class="text-plain"><pre [innerHTML]="plainText"></pre></div>
    <div *ngSwitchCase="datasetType.IMG" class="img"><img [src]="imgData" alt="img"></div>
  </ng-container>
  <div *ngIf="frontEndError" class="text-plain"><pre>{{frontEndError}}</pre></div>
  <div *ngIf="angularComponent">
    <ng-container *ngComponentOutlet="angularComponent.component;ngModuleFactory: angularComponent.moduleFactory;injector: injector"></ng-container>
  </div>
</div>
